<template>
    <div class="recruitment_page">
        <div class="maxWidth1400">
            <div class="recInfo">
                <p v-if="locale === 'zh_cn'">
                    Water
                    Wood致力成为金融服务的全球领导者。而员工就是我们成功的关键。我们致力建立一个良好的<br />
                    工作环境，为员工提供一个发挥他们所长、探索潜能的地方。在Water
                    Wood，我们每个人都专心做事，精益求精。<br />
                    我们希望Water
                    Wood大家庭中的每一份子，都可以一同成长取得最大的成就及满足感。
                </p>
                <p v-if="locale === 'zh_tw'">
                    Water
                    Wood致力成為金融服務的全球領導者。而員工就是我們成功的關鍵。我們致力建立一個良好的<br />
                    工作環境，為員工提供一個發揮他們所長、探索潛能的地方。在Water
                    Wood，我們每個人都專心做事，精益求精。<br />
                    我們希望Water
                    Wood大家庭中的每一份子，都可以一同成長取得最大的成就及滿足感。
                </p>
                <p v-if="locale === 'en'">
                    Water wood is committed to being a global leader in
                    financial services and our people are the key to our
                    success.<br />
                    We aim to create a supportive and encouraging environment
                    that provides a place for our employees to excel and explore
                    their talents and potentials.<br />
                    At Water wood, each of us is dedicated to excellence. We
                    want everyone in the Water Wood family to grow together and
                    achieve the greatest sense of achievement and satisfaction.
                </p>
                <p>
                    <span
                        >{{ $t("contact.text1") }}：
                        <a
                            href="mailto:contact@waterwood.com.hk"
                            ondragstart="return false"
                            >{{ state.info?.email }}</a
                        ></span
                    >
                    <span class="tel"
                        >{{ $t("contact.text2") }}：{{
                            state.info?.phone
                        }}</span
                    >
                </p>
            </div>
        </div>
    </div>
</template>

<script setup>
const { locale } = useI18n();
let state = reactive({
    phoneList: [],
    info: {
        address: "",
        phone: "",
        title: "",
        imgUrl: "",
        email: "",
    },
});
const getCompanyInfo = async () => {
    const res = await useGET("/v1/contactus/getInfo");
    if (res?.data) {
        const jsonData = JSON.parse(res.data);
        if (jsonData?.photo) {
            state.photoList = jsonData.photo.split(",");
        }
        state.info = { ...jsonData };
    }
};

onMounted(() => {
    getCompanyInfo();
});

watch(
    () => locale.value,
    (val) => {
        getCompanyInfo();
    }
);
</script>

<style lang="scss" scoped>
.recruitment_page {
    background: #fff;
    padding: 140px 0px;
    .recInfo {
        width: 100%;
        position: relative;
        &::before {
            content: "";
            position: absolute;
            width: 158px;
            height: 126px;
            left: 0;
            top: 0;
            background: url(/assets/image/relrc1.png) no-repeat top left / 100%
                auto;
        }
        &::after {
            content: "";
            position: absolute;
            width: 158px;
            height: 126px;
            right: 0;
            top: 0;
            background: url(/assets/image/relrc1.png) no-repeat top left / 100%
                auto;
            transform: rotate(180deg);
        }

        p {
            font-size: 16px; /* px-to-viewport-ignore */
            text-align: center;
            line-height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            font-weight: 300;
            a {
                color: #0058ce;
            }
            span {
                font-size: 16px; /* px-to-viewport-ignore */
                font-weight: 300;
            }
            .tel {
                margin-left: 15px;
            }
        }
    }
}
</style>
